<template>
    <div>
        <div class="xx-grid">
            <!-- :headimg="item.img==null?'/img/code.jpg':item.img" -->
            <code-card :type="item.type" :identity="item.identity" :id="item.id"  @click.native="goEdit(item)" v-for="(item,i) in  cards" :key="i" :title="item.title" :author="item.name" ></code-card>
        </div>
    </div>
</template>

<script>
import CodeCard from '../components/CodeCard.vue'
import API from '../api/index'
export default {
    name: 'CodeSquare',
    components: {
        CodeCard
    },
    data() {
        return {
            cards: [],
            pageCount: 1,
            pageIndex: 0
        }
    },
    computed: {

    },
    activated() {
        this.getSnippetByUserid()
        this.$root.$emit('switchCollapse', false)
        this.$root.$on('getSnippetByUserid', () => { // 监听事件，这里$root很重要，不懂去官网介绍
            this.getSnippetByUserid()
        })
        this.$root.$on('cleanSnippetByUserid', () => { // 监听事件，这里$root很重要，不懂去官网介绍
            this.cards = []
            this.pageIndex = 0
            this.pageCount = 1
        })
        // 组件被激活需要添加滚动监听
        const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        })
        setTimeout(() => {
            loading.close()
            this.$root.$emit('goToScroll', 'scroll2')
        }, 400)
    },
    deactivated() {
        // 组件被冷藏需要移除滚动监听
        // this.$root.$emit("removeEvent")
    },
    created() {

    },
    mounted() {

    },
    methods: {

        goEdit(item) {
            console.log(item)
            this.$router.push({ path: '/myvscode', query: { snippet: item.id } })
        },
        getSnippetByUserid() {
            this.pageIndex = this.pageIndex + 1
            if (this.pageIndex > this.pageCount) {
                return
            }
            this.axios(API.snippet.getSnippetByUserid(this.pageIndex)).then(res => {
                console.log(res.data)
                this.cards = this.cards.concat(res.data.data.list)
                this.pageCount = res.data.data.lastPage
            }).catch((e) => {
                console.log(e)
                this.$root.$emit('showLogin', true)
                this.pageIndex = 0
                this.pageCount = 1
            })
        }
        // //   this.axios.post('/api/getSnippetByUserid').then(res=>{
        // //     console.log(res.data)
        // //     this.cards=res.data.data
        // //   }).catch((e)=>{
        // //       console.log(e)
        // //   })
        // }
    }
}
</script>

<style scoped>
    .xx-grid{
        margin:10px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        -webkit-box-align: start;
        -webkit-align-items: start;
        -ms-flex-align: start;
        align-items: start;
        grid-gap: 4rem 3rem;
    }
    @media screen and (max-width: 600px) {
        .xx-grid{
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }
</style>
